//  this library.
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:hktk_app/ienum/package/payment_type_enum.dart';
import 'package:hktk_app/util/font_util.dart';
import 'package:hktk_app/util/view_util.dart';

/// 订单支付方式
class OrderTypeWidget extends StatelessWidget {
  /// 对应支付方式的下标
  final PaymentTypeEnum index;

  /// 是否隐藏支付方式（微信/支付宝）
  final bool payHide;

  /// 支付方式点击方法
  final ValueChanged<PaymentTypeEnum> onTapFun;

  const OrderTypeWidget({
    super.key,
    required this.index,
    required this.payHide,
    required this.onTapFun,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _titleItem(),
        hiSpace(height: 20),
        if (!payHide)
          _showItem(
            svgUrl: "images/package/order_type_zfb.svg",
            name: "支付宝",
            type: PaymentTypeEnum.alipay,
          ),
        hiSpace(height: 18),
        if (!payHide)
          _showItem(
            svgUrl: "images/package/order_type_wx.svg",
            name: "微信",
            type: PaymentTypeEnum.weixin,
          ),
        hiSpace(height: 18),
        if (payHide)
          _showItem(
            svgUrl: "",
            name: "充值",
            type: PaymentTypeEnum.applypay,
          ),
      ],
    );
  }

  /// 标题组件
  _titleItem() {
    return Text(
      payHide ? "支付方式" : "选择支付方式",
      style: FontUtil.fontBlack1(28, fontWeight: FontWeight.w500),
    );
  }

  /// 显示选择的支付方式
  _showItem({
    required String svgUrl,
    required String name,
    required PaymentTypeEnum type,
  }) {
    return GestureDetector(
      onTap: () {
        if (type != index) {
          onTapFun(type);
        }
      },
      child: Container(
        height: 98,
        padding: EdgeInsets.symmetric(vertical: 24, horizontal: 30),
        decoration: BoxDecoration(
          color: colorWhite1,
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: colorGrey17, width: 2),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            _showTitleItem(svgUrl, name),
            index == type ? _selectedItem() : _defaultItem(),
          ],
        ),
      ),
    );
  }

  /// 显示标题
  _showTitleItem(String svgUrl, String name) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        if(svgUrl != "") SvgPicture.asset(
          svgUrl,
          width: 50,
          height: 50,
        ),
        if(svgUrl != "") hiSpace(width: 20),
        Text(
          name,
          style: FontUtil.fontBlack10(26),
        ),
      ],
    );
  }

  /// 选中的样式
  _selectedItem() {
    return SvgPicture.asset(
      "images/login/authority_select.svg",
      width: 32,
      height: 32,
    );
  }

  /// 未选中，
  _defaultItem() {
    return Container(
      width: 32,
      height: 32,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: colorBlack5, width: 2),
      ),
    );
  }
}
